<template>
  <el-container class="home-container">
    <!-- 头部 -->
    <el-header>
      <div>
        <img src="../assets/huangjinlogo.png" alt="" />
        <span>黄金珠宝</span>
      </div>
      <el-button type="danger" @click="btnback">退出</el-button>
    </el-header>
    <!-- 页面主体 -->
    <el-container>
      <!-- 左侧侧边栏 -->
      <el-aside :width="iscollapse ? '64px' : '200px'">
        <div class="toogle" @click="btntoogle">|||</div>
        <el-menu
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#409EFF"
          :collapse="iscollapse"
          :collapse-transition="false"
          unique-opend
          :router="true"
        >
          <!-- 加一个点击事件保存一个path值@click="savanavstate(item.URL)-->
          <el-menu-item
            :index="item.url + ''"
            v-for="item in menu"
            :key="item.mid"
            @click="savanavstate(item.url)"
          >
            <i :class="inconlist[item.id]"></i>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 右侧主体内容 -->
      <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// import { menuPost } from '../http/api'

export default {
  name: 'Home',
  components: {},

  data() {
    return {
      menu: this.$store.state.menu,
      //是否折叠
      iscollapse: false,
      //测试数据
      asidetest: [
        {
          //客户管理
          asidename: '客户管理',
          id: '1',
          URL: '/clientman',
        },
        {
          asidename: '商品基础设置',
          id: '2',
          URL: '/goods',
        },
        {
          asidename: '商品管理',
          id: '3',
          URL: '/goodsman',
        },
        {
          asidename: '门店',
          id: '4',
          URL: '/shopDetail',
        },
        {
          asidename: '员工管理',
          id: '8',
          URL: '/staff',
        },
        {
          asidename: '供应商管理',
          id: '9',
          URL: '/provider',
        },
        {
          asidename: '权限',
          id: '5',
          URL: '/limits',
        },
        {
          asidename: '公告',
          id: '6',
          URL: '/notice',
        },
        {
          asidename: '修改密码',
          id: '7',
          URL: '/password',
        },
        {
          asidename: '测试接口',
          id: '10',
          URL: '/test',
        },
      ],
      inconlist: {
        1: 'el-icon-user-solid',
        2: 'el-icon-menu',
        3: 'el-icon-eleme',
        4: 'el-icon-s-shop',
        5: 'el-icon-s-tools',
        6: 'el-icon-s-comment',
        7: 'el-icon-lock',
        8: 'el-icon-s-check',
        9: 'el-icon-box',
        10: 'el-icon-edit',
      },
    }
  },
  //   computed:{
  //     menu(){ return this.$store.state.menu
  // }

  //   },

  // created(){
  //     this.getMenuList()
  //   },
  created() {
    this.fn()
  },
  methods: {
    btntoogle() {
      this.iscollapse = !this.iscollapse
    },
    fn() {
      console.log(this.menu, 'uuuu')
    },
    btnback() {
      localStorage.clear()
      //将token清空
      // console.log(localStorage);
      this.$store.commit('quit')
      this.$router.push('/login')
    },
    // 保存连接的激活状态
    savanavstate(activepath) {
      window.sessionStorage.setItem('activepath', activepath)
    },
  },
}
</script>
<style lang="less" scoped>
.el-aside {
  background-color: #2c3b42;
  .toogle {
    background-color: rgb(62, 63, 63);
    text-align: center;
    line-height: 24px;
    font-size: 10px;
    color: white;
    cursor: pointer;
    letter-spacing: 4px;
  }
}
.el-main {
  background-color: white;
  overflow-x: hidden;
}
.home-container {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: auto;
  overflow-x: hidden;
}
.el-header {
  background: #2c3b42;
  display: flex;
  justify-content: space-between;
  color: white;
  padding-left: 0;
  align-items: center;
  font-size: 20px;
  > div {
    //纵向居中对齐
    display: flex;
    align-items: center;
  }
  span {
    margin-left: 15px;
  }
  img {
    width: 50px;
    height: 50px;
  }
}
a {
  color: white;
  text-decoration: none;
}
</style>>
